<template>
  <WaterFall :minGap="10" :srcs="imagesRef" :singleWidth="400"></WaterFall>
</template>

<script setup lang="ts">
import { ref, onBeforeMount } from 'vue';
import getGirlPics from '@/api/getGirlPics';
import type { ResponseData, ImageData } from '@/api/getGirlPics';
import WaterFall from '@/components/WaterFall/WaterFall.vue';

const cardsRef = ref<ImageData[] | []>([]);
const imagesRef = ref<string[]>([]);
onBeforeMount(async () => {
  const result: ResponseData = await getGirlPics();
  imagesRef.value = result.data.map((item: ImageData) => item.imageUrl);
  cardsRef.value = result.data.map((item: ImageData) => ({
    ...item,
    src: item.imageUrl,
  }));
});
</script>

<style scoped lang="scss">
.WaterFall-container {
  // width: 1290px;
}
</style>
